@import '../../assets/scss/support';
.mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 6999;
}



.banner{
  width:221px;
  padding:32px 44px 0;
  // margin-bottom:120rpx;
  // background-color: #681716;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  height:391px;
  background: url('%ASSETS_IMG%/l-home-coupon1@2x.png') no-repeat;
  background-size: contain;
}

.banner1{
  width:221px;
  padding:42px 44px 0;
  // margin-bottom:120rpx;
  // background-color: #681716;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  height:271px;
  background: url('%ASSETS_IMG%/l-home-coupon2@2x.png') no-repeat;
  background-size: contain;
}

.banner2{
  width:221px;
  padding:42px 44px 0;
  // margin-bottom:120rpx;
  // background-color: #681716;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  height:346px;
  background: url('%ASSETS_IMG%/l-home-coupon3@2x.png') no-repeat;
  background-size: contain;
}

.iphoneX{
  margin-bottom: 188rpx;
}

.title{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .title-left{
    width:99px;
    height:22px;
    background: url('%ASSETS_IMG%/l-home-coupon-left@2x.png') no-repeat;
    background-size: contain;
  }
  .title-center{
    margin:0 5px;
    font-size: 20px;
    color:#d76628;
    font-weight: 600;
  }
  .title-right{
    width:78px;
    height:22px;
    background: url('%ASSETS_IMG%/l-home-coupon-right@2x.png') no-repeat;
    background-size: contain;
  }
}

.list{
  margin-top:48rpx;
  width:100%;
  max-height:636rpx;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.coupon-scroll{
  width:200px;
  overflow: scroll;
  margin-top:48rpx;
}

.list-item{
  width:200px;
  height:55px;
  // padding: 24rpx 14rpx;
  background: url('%ASSETS_IMG%/l-couponList-item1@2x.png') no-repeat;
  background-size: cover;
  margin-bottom:20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  &:last-child{
    margin-bottom:0;
  }
  .item-left{
    width:54px;
    padding:0 8px;
    height:55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    // align-items: center;
    // margin-left:20rpx;
    .item-left-top{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: baseline;
      text{
        font-size: 20px;
        line-height: 15px;
        color:#ffca97;
        font-weight: 600;
      }
      .rmb{
        width:24rpx;
        // height:24rpx;
        // border-radius: 100%;
        // background-color: #b08f46;
        font-size: 8px;
        color:#ffca97;
        line-height: 6px;
      }
      .discount{
        font-size: 8px;
        line-height:6px;
        color:#ffca97;
      }
    }
    
    .item-left-bottom{
      font-size:20px;
      color:#ffca97;
      margin-top:20rpx;
    }
  }
  .item-center{
    width:3px;
    height:25px;
    background: url('%ASSETS_IMG%/l-couponList-center@2x.png') no-repeat;
    background-size: contain;
  }
  .item-right{
    width:111px;
    padding:0 8px;
    height:55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    .name{
      font-size: 13px;
      color:#ffffff;
      @include textoverflow(1);
      max-width: 111px;
      margin-bottom:7px;
    }
    .type{
      font-size: 8px;
      color:#ffffff;
      margin-left:5px;
    }  
    .time{
      font-size: 8px;
      color:#ffffff;
    }
  }
  
}

.btn{
  width:310px;
  height:71px;
  // border:2rpx solid #fce7b9;
  // font-size: 40rpx;
  // color:#fce7b9;
  // text-align: center;
  // line-height: 78rpx;
  margin-top:10px;
  background: url('%ASSETS_IMG%/l-couponList-btn-mine@2x.png') no-repeat;
  background-size: contain;
}